CSS - Diferença entre hidden e display:none

Sabemos que colocando visibility:hidden ou display:none o elemento não será exibido pelo browser mas há diferenças e o uso posterior determinará qual dos dois estilos devemos utilizar e em qual situação.

CSS - display:none

No caso do display:none o elemento não é renderizado e o espaço que ele ocuparia não é reservado, como se ele não existisse na página.

Ao alterarmos o display-none da tag veremos que o leioute da página é alterado e é aberto um espaço para exibir o elemento que antes não existia.

Exemplo1 :
<div style="display:none">Esta é a div2 e foi definida com o estilo display:none</div>

Abaixo está a div com o código acima e note como o browser Não exibe:
Entre no depurador do browser e você verá que a div2 foi enviada para o web browser que simplesmente não exibiu.
Note que o espaço do elemento no documento NÃO foi reservado e cada vez que você exibe ou esconde o elemento o restante da página sofre deslocamento.




visibility:hidden

No visibility:hidden o elemento é renderizado e seu espaço reservado mas o seu conteúdo não é exibido.

Removendo o parametro visibility:hidden da tag faremos com que o elemento fique visível na página exatamente no local que foi reservado para ele, ou seja, nada é deslocado..

Exemplo2 :
<div style="visibility:hidden;">Esta é a div1 e foi definida com o estilo visibility:hidden</div>
Abaixo está o código da div acima e note como o browser Não exibe mas o espaço está reservado:
Entre no depurador do browser e você verá que a div1 foi enviada para o web browser que simplesmente não exibiu.
Note que o espaço do elemento no documento foi reservado.




Dica

Quando damos submit / postback num form e um elemento dentro do form possuir o atributo display:none este não será enviado ao servidor.
Portanto se quer enviar um dado para o servidor escondido que seja por visibility:hidden.